const { ipcRenderer,shell  } = require("electron");
const Vue = require('vue')
const { formatterTime } = require("../../utils/date.js")
const { getConfig, defaultConfig,setConfig } = require("../../utils/store.js")
const { ping,updateApiClient } = require("../../utils/api.js")
const { showToast } = require("../../utils/toast.js")
//

// 注册组件

//

const app = Vue.createApp({

  data: () => {
    return {
      opacity: 0.6,
      mainColor: '#49CE95',
      subColor: '#FA0A55',
      nsAddr : '',
      nsSecret :'',
      nsLow:'',
      nsHigh:'',
      // 控制是否开机自启动的
      isOn: false,
      lastUpdateTime:""
    }
  },
  mounted() {
    let currConfig = getConfig()
    this.opacity = currConfig.opacity
    this.mainColor = currConfig.mainColor
    this.subColor = currConfig.subColor
    this.nsSecret = currConfig.nsSecret
    this.nsAddr = currConfig.nsAddr
    this.nsLow = currConfig.nsLow
    this.nsHigh = currConfig.nsHigh
    this.isOn = currConfig.isOn


    //   监听数据变化
    ipcRenderer.on("config", (e, data) => {
      console.log("监听到数据变化:",data.lastUpdateTime)
      this.mainColor = data.mainColor
      this.subColor = data.subColor
      if(data.lastUpdateTime){
        this.lastUpdateTime = formatterTime(data.lastUpdateTime)
      }
    })
  },
  methods: {
    changAutoLangch(){
      console.log("changAutoLangch:",e)
    },
    async storeConfig(type) {
      const data = type == 0 ? {
        opacity: this.opacity,
        mainColor: defaultConfig.mainColor,
        subColor: defaultConfig.subColor,
        nsAddr : this.nsAddr,
        nsSecret : this.nsSecret,
        nsLow : this.nsLow,
        nsHigh : this.nsHigh,
        isOn : this.isOn
      } : defaultConfig
      if (type == 1) {
        this.opacity = defaultConfig.opacity
        this.mainColor = defaultConfig.mainColor
        this.subColor = defaultConfig.subColor
        this.nsSecret = ''
        this.nsAddr = ''
        this.nsLow = defaultConfig.nsLow
        this.nsHigh = defaultConfig.nsHigh
        this.isOn = defaultConfig.isOn
        // return
      }
      //对ns进行校验
      if (this.nsAddr && this.nsSecret){
        updateApiClient(this.nsAddr,this.nsSecret)
        let res = await ping()
        if(res.status === 401){
          showToast("ns配置错误，未能正确拉取数据", 1000)
          return;
        }
      }


      // 持久化数据
      setConfig(data)
      ipcRenderer.send('updateConfig', data)
      // 更新开机启动状态
      ipcRenderer.send('changeAutoLauncher', this.isOn)

      showToast("更改成功", 1000)
    },
    checkOpacity(e) {
      const flag = /^(1|(0\.[0-9]+))$/.test(this.opacity)
      if (!flag) {
        this.opacity = currConfig.opacity
      }
    },
    // checkColor(type) {
    //   console.log(type)
    //   const reg = /^#([0-9]|[a-f|A-F]){6}$/
    //   if (type == 0) {
    //     !reg.test(this.mainColor) ? this.mainColor = currConfig.mainColor : ''
    //   } else {
    //     !reg.test(this.subColor) ? this.subColor = currConfig.subColor : ''
    //   }
    // },

    // 改变状态
    toggle() {
      this.isOn = !this.isOn;
    },
    openLink(url){
      shell.openExternal(url).catch(err => {
        console.error("打开链接失败:", err);
      });
    }
  },
  computed: {
    statusText() {
      return this.isOn ? 'ON' : 'OFF';
    },
    buttonStyles() {
      console.log("buttonStyles:",this.mainColor)
      return {
        backgroundColor: this.isOn ? this.mainColor : '#ccc',
        border: '1px solid white'
      };
    },
    circleStyles() {
      return {
        left: this.isOn ? '5px' : '40px',
        backgroundColor: this.isOn ? '#fff' : '#888',
        boxShadow: `0 0 10px ${this.isOn ? '#fff' : '#888'}`
      };
    },
    textStyles() {
      return {
        right: this.isOn ? '10px' : '30px',
        color: this.isOn ? '#fff' : '#888'
      };
    }
  },
})
app.mount("#app")

